<template>
  <div class="my" :class="isShow ? 'bgc-night' : 'bgc-sun'" >
    <!-- 箭头 -->
    <div class="my-arrow" @click="returnIndex">
      <img src="../assets/images/左箭头.png"  class="auto-img pic" v-if="!isShow"/>
      <img src="../assets/images/sunLeft.png" class="auto-img pic" v-if="isShow"/>
    </div>
    <!-- 头像 -->
    <div class="tx">
      <div class="tx-img">
        <img src="../assets/images/tx.png" class="auto-img" />
      </div>
      <div>LL</div>
    </div>
    <!-- 我的收藏 -->
    <div class="my-collect">
      <div class="collect">
        <div>我的收藏</div>
        <div><img src="../assets/images/右箭头.png" class="auto-img" /></div>
      </div>
      <div class="collect">
        <div>信息中心</div>
        <div><img src="../assets/images/右箭头.png" class="auto-img" /></div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="button">
      <div class="button-img"  @click="change">
        <div class="button-pic">
          <img
            src="../assets/images/夜间模式.png"
            class="auto-img pic"
            v-if="!isShow"
          />
          <img
            src="../assets/images/太阳.png"
            class="auto-img pic"
            v-if="isShow"
          />
        </div>
        <div class="bottom">

        <div class="night" v-if="!isShow">夜间模式</div>
        <div class="sun" v-if="isShow">日间模式</div>
        </div>
      </div>
      <div class="button-img" @click="goSetting">
        <div class="button-pic">
          <img
            src="../assets/images/设置.png"
            class="auto-img"
            v-if="!isShow"
          />
          <img
            src="../assets/images/设置sun.png"
            class="auto-img"
            v-if="isShow"
          />
        </div>
        <div class="set" >设置</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      isShow: localStorage.getItem("theme") === "true" ? true : false,
    };
  },
  methods: {
    change() {
      if (this.isShow) {
        this.isShow = false;
        localStorage.setItem("theme", false);
      } else {
        this.isShow = true;
        localStorage.setItem("theme", true);
      }
    },
    returnIndex(){
        this.$router.push({name:"Index"});
    },
    goSetting(){
      this.$router.push({name:"Setting"});
    }
  },
};
</script>

<style lang="postcss" scoped>
.my {
  width: 100%;
  height: 100%;
  position: fixed;
}
.my-arrow {
  margin: 10px;
  width: 100%;
  height: 30px;
}

.my-arrow .pic {
  width: 20px;
  height: 20px;
}
/* 头像 */
.tx{
  width: 100%;
  height: 100px;
  padding-top: 16px;
  box-sizing: border-box;
}
.tx .tx-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
}
.tx div {
  width: 18px;
  margin: 10px auto;
  height: 30px;
  font-weight: bold;
}
/* 收藏 */
.my-collect {
margin-top: 30px;
}
.collect div {
  margin:20px 10px;
  font-size: 16px;
}
.collect div img {
  width: 28px;
  height: 28px;
}
.collect {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  border-top:1px solid #bfbfbf;
}
/* 底部 */
.button {
  width: 70%;
  display: flex;
  justify-content: space-around;
  margin: 270px auto 0;
}
.button .button-img {
  width: 30px;
  height: 30px;
  position: relative;
}
.button .button-img div {
  width: 70px;
  margin-top: 0px;
  margin-bottom: 10px;
}
.button .button-img .button-pic {
  width: 30px;
  height: 30px;
}
.night,
.sun {
  position: absolute;
  left: -10px;
}
.set{
  position: relative;
  left:2px;
}
</style>